<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
	<script type="text/javascript" src="../assets/vue.js"></script>
	<title>methods Option</title>
</head>
<body>
<h1>23_Vue_methods</h1>
<hr>
<div id="app">
</div>
<button onclick="destroy()">卸载</button>
<button onclick="vm.$forceUpdate();">更新</button>
<button onclick="tick();">更改数据</button>

<script type="text/javascript">
	var app=Vue.extend({
		template:`<p>{{msg}}</p>`,
		data:function () {
			return{
				msg:'Hello',
			}
		},
		mounted:function () {
			console.log('被创建');
		},
		destroyed:function () {
			console.log('被卸载');
		},
		updated:function () {
			console.log('被更新');
		}
	});

	var vm = new app().$mount("#app");

	function destroy(){
		vm.$destroy();
	}

	function tick(){
		vm.msg="update message info ";//更改data中的内容
		vm.$nextTick(function(){
			console.log('message更新完后我被调用了');
		})
	}

</script>
</body>
</html>